<template>
	<div>
		<!-- <u-navbar title="孝夕阳居家养老服务" title-width="300"></u-navbar> -->
		<div class="index">
			<img class="indexBg" src="@/static/img/indexBg.png" />
			<u-swiper style="background: none;" class="indexBanner" :list="list3" previousMargin="30" nextMargin="30"
				circular :autoplay="false" radius="5" bgColor="#ffffff"></u-swiper>
			<div class="indexTitle">商家列表</div>
			<div class="indexList">
				<div class="indexListItem" v-for="(item, index) in list.member" :key="index" @click="detil(item.id)">
					<div class="indexListItemLeft">
						<img v-show="item.type==1" :src="'https://admin.lykangshu.top'+item.work_photos" alt="">
						<img v-show="item.type==2" :src="'https://admin.lykangshu.top'+item.store_photo" alt="">
					</div>
					<div class="indexListItemRight">
						<div class="indexListItemRightTxt1">
							<div class="indexListItemRightTxt1Name" v-show="item.type==1">{{item.name}}</div>
							<div class="indexListItemRightTxt1Name" v-show="item.type==2">{{item.store_name}}</div>
							<img src="@/static/img/star.png" alt="">
							<div class="indexListItemRightTxt1Star">{{item.score}}</div>
						</div>
						<div class="indexListItemRightTxt2">
							<img class="indexListItemRightTxt2Img" src="@/static/img/badge.png" alt="">
							<div class="indexListItemRightTxt1Star">资质认证</div>
							<img src="@/static/img/rightArrow.png" alt="">
							<div class="indexListItemRightTxt2Tips">最近接单{{item.single_quantity}}单</div>
						</div>
						<div class="indexListItemRightTxt3">
							<div class="indexListItemRightTxt3Left">
								<img v-show="item.type==2" src="@/static/img/shop.png" alt="">
							</div>
							<div class="indexListItemRightTxt3Right">
								<img src="@/static/img/site.png" alt="">
								<div>{{item.distance}}km</div>
							</div>
						</div>
						<div class="indexListItemRightTxt4">
							<div class="indexListItemRightTxt4Left">
								<div class="indexListItemRightTxt4LeftItem" v-for="(item2, index2) in item.label"
									:key="index2">
									{{item}}
								</div>
							</div>
							<div class="indexListItemRightTxt4Right">
								立即预约
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				list: {},
				list3: [],
				lon: "",
				lat: ""
			}
		},
		onLoad() {
			const id = 5
			this.id = id
			console.log(this.$store.state);
			const that = this
			uni.showLoading()
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					uni.hideLoading()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.lon = res.longitude
					that.lat = res.latitude
					that.getindex()
				},
				complete(err) {
					uni.showModal({
						title:JSON.stringify(err)
					})
				}
			});
		},
		methods: {
			async getindex() {
				const res = this.$api("/api/index/index", 'post', {
					longitude: this.lon,
					latitude: this.lat,
					region: "河南省-郑州市",
					project: this.id,
					offset: '1'
				}).then((res) => {
					this.list = res.data.data
					res.data.data.carousel.forEach((item, index) => {
						this.list3.push('https://admin.lykangshu.top' + item.image)
					})
				})
			},
			detil(i) {
				uni.navigateTo({
					url: '/pages/index/detil/detil?id=' + i
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
		font-family: PingFang SC-Bold;

		.indexBg {
			width: 100%;
			height: 280rpx;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
		}

		.indexBanner {
			width: 690rpx;
			height: 284rpx;
			position: absolute;
			top: 84rpx;
			left: 50%;
			transform: translateX(-50%);
			display: block;
		}

		.indexTitle {
			padding-top: 400rpx;
			padding-left: 30rpx;
			color: #FB774B;
			font-size: 32rpx;
			font-family: PingFang SC-Bold;
			font-weight: Bold;
			line-height: 44rpx;
		}

		.indexList {
			padding: 30rpx;
			box-sizing: border-box;

			.indexListItem {
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				border: 2rpx solid rgba(0, 0, 0, 0.05);

				box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.05);
				margin-bottom: 26rpx;
				border-radius: 20rpx;

				.indexListItemLeft {
					width: 190rpx;
					flex: 0 0 190rpx;
					height: 190rpx;

					img {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.indexListItemRight {
					margin-left: 16rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.indexListItemRightTxt1 {
						display: flex;
						align-items: center;

						img {
							margin-left: 26rpx;
						}

						.indexListItemRightTxt1Star {
							margin-left: 6rpx;
							color: #FDAE47;
							font-size: 24rpx;
						}

						.indexListItemRightTxt1Name {
							color: #333;
							font-size: 30rpx;
							font-weight: Bold;

						}
					}

					.indexListItemRightTxt2 {
						display: flex;
						align-items: center;

						.indexListItemRightTxt2Img {
							margin-left: -7rpx;
						}

						.indexListItemRightTxt2Tips {
							color: #999;
							font-weight: Bold;
							font-size: 24rpx;
							margin-left: 8rpx;
						}
					}

					.indexListItemRightTxt3 {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.indexListItemRightTxt3Left {
							display: flex;
							align-items: center;

							img {
								margin-right: 6rpx;
							}

							div {
								color: #333;
								font-size: 24rpx;
							}
						}

						.indexListItemRightTxt3Right {
							display: flex;
							align-items: center;

							img {
								margin-right: 10rpx;
							}

							div {
								color: #999;
								font-size: 22rpx;
							}
						}
					}

					.indexListItemRightTxt4 {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.indexListItemRightTxt4Left {
							display: flex;

							.indexListItemRightTxt4LeftItem {
								background: #FEE3C5;
								color: #FB774B;
								font-size: 18rpx;
								border-radius: 80rpx;
								padding: 4rpx 10rpx;
								margin-right: 4rpx;
							}
						}

						.indexListItemRightTxt4Right {
							background: #ff6d55;
							padding: 10rpx 18rpx;
							border-radius: 52rpx;
							color: #fff;
							font-weight: Bold;
							font-size: 22rpx;
						}
					}
				}
			}
		}
	}
</style>